<template>
  <div class="log-main" v-if="hasAuth('logs')">
    <div class="log-header">
      <el-form :inline="true">
        <el-form-item>按信息搜索</el-form-item>
        <el-form-item>
          <el-input :placeholder="searchType" v-model="search"
                    class="input-with-select" @change="changeSearchInput" clearable>
            <el-select v-model="searchType" slot="prepend">
              <el-option label="操作类型" value="module"></el-option>
              <el-option label="请求名称" value="method"></el-option>
              <el-option label="请求方法" value="request_method"></el-option>
              <el-option label="操作人员" value="operator"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="searchData"></el-button>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <el-table
        ref="logList" :data="logList" border
        @selection-change="selectionChange"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          fixed
          prop="module"
          label="操作类型"
          width="110"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="method"
          label="请求名称"
          width="110"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="requestMethod"
          label="请求方法"
          width="80"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="operator"
          label="操作人员"
          width="80"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="requestUrl"
          label="请求地址"
          width="180"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="operatorTime"
          label="操作时间"
          width="170"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="requestParam"
          label="请求参数"
          show-overflow-tooltip>
      </el-table-column>
    </el-table>

    <div class="page">
      <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageCurrentChange"
          :current-page="current"
          :page-sizes="[5, 10, 20, 30, 999]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <admin-footer/>
  </div>
</template>

<script>
import {getAllLog} from "@/network/log";
import AdminFooter from "@/components/conment/adminfooter/AdminFooter";
import {hasPermission} from "@/utils/mixin";

export default {
  name: "Log",
  components: {AdminFooter},
  mixins:[hasPermission],
  data(){
    return{
      logList:[],
      searchType:'module',
      search:'',
      size:10,
      total:0,
      current:1,
    }
  },
  methods:{
    filterStatueTag(){},
    selectionChange(){},
    searchData(){
      if (this.search!==''){//数据不为空
        this.getLogList(this.current,this.size,this.searchType,this.search)
      }else {
        this.$message.warning("请输入数据后再查询")
      }
    },
    changeSearchInput(){
      if (this.search === ''){
        this.getLogList(this.current,this.size,'','')
      }
    },
    pageSizeChange(val){
      this.size = val
      this.getLogList(this.current,this.size,'','')
    },
    pageCurrentChange(val){
      this.current = val
      this.getLogList(this.current,this.size,'','')
    },
    getLogList(current,size,type,data){
      getAllLog(current,size,type,data).then(res=>{
        if (res.data.data.records.length === 0)
          this.$message.warning("未找到符合条件的数据")
        else{
          this.logList = res.data.data.records
          this.size = res.data.data.size
          this.current = res.data.data.current
          this.total = res.data.data.total
        }
      })
    }
  },
  created() {
    this.getLogList(this.current,this.size,'','')
  }
}
</script>

<style scoped>

</style>